<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .box{
            width: 800px;
            margin:20px auto;
        }
        input{
            width: 300px;
            height: 30px;
            margin:20px;
            font:16px/30px microsoft yahei;
            color:#666;
        }
        button{
            width: 80px;
            height: 35px;
            margin-right:20px;
            font:16px/35px microsoft yahei;
        }
        p{
            width: 500px;
            height: 500px;
            font:16px/30px microsoft yahei;
            background-color:#666;
            color:#fff;
        }
        span{
            background-color:#fff;
            color:#000;
        }
    </style>
</head>
<body>
<div class="box">
    <input type="text"><button>查找</button><button>改变样式</button>
    <p>Christmas or Christmas Day is a holiday celebrating the birth of Jesus, the central figure of Christianity. It is traditionally celebrated on December 25 by most Western Christian churches. Although dating to probably as early as a.d. 200, the feast of Christmas did not become widespread until the Middle Ages. Aspects of celebration may include gift-giving, Christmas trees, display of Nativity sets, church attendance, the Father Christmas/Santa Claus myth, and family gatherings. The word Christmas is derived from Middle English Christemasse. It is a contraction meaning "Christ's mass". The name of the holiday is often shortened to Xmas because Roman letter "X" resembles the Greek letter X, an abbreviation for Christ.</p>
</div>
<script>
    var inp=document.getElementsByTagName("input")[0];
    var btn=document.getElementsByTagName("button");
    var P=document.getElementsByTagName("p")[0];
    var str=P.innerHTML;
    btn[0].onclick=function(){
        var s=inp.value;
        var arr1=str.split(s);
        P.innerHTML=arr1.join("<span>"+s+"</span>");
    }
    btn[1].onclick=function(){
        var s=inp.value;
        var arr1=str.split(s);
        var stn="";
        P.innerHTML=arr1.join("<span>"+s.toUpperCase()+"</span>");
    }
</script>
</body>
</html>